<template>
  <div>
    <div style="margin: 2px;">
      <h1 style="font-size: 25px;text-align: center;">回收员信息</h1>
      <!-- 账号状态下拉框 -->
      <el-select  style="float: left;"  @change="selectState(state)" v-model="state" clearable placeholder="选择状态">
        <el-option  v-for="sl in stateList" :key="sl.state" :label="sl.orderState" :value="sl.state">
        </el-option>
      </el-select>
      <div  style="float: left;margin-left: 800px;">
        <el-input  style="float: left; " placeholder="请输入回收员姓名" @change="seachSiteName" prefix-icon="el-icon-search"  v-model="recycleName" clearable> </el-input>
      </div>
    </div>
    <!-- 站点列表 -->
    <el-table ref="multipleTable" :data="pageInfo.records" style="width: 100%;">
      <el-table-column type="index" width="40">
      </el-table-column>
      <el-table-column prop="recycleName" label="姓名" width="90">
      </el-table-column>
      <el-table-column prop="recycleAge" label="年龄" width="90">
      </el-table-column>
      <el-table-column prop="recyclePhone" label="电话" width="150">
      </el-table-column>
      <el-table-column prop="recycleStore" label="评分" width="90">
      </el-table-column>
      <el-table-column label="头像" width="205">
        <template slot-scope="scope">
          <img style="width: 200px; height: 150px" :src="scope.row.recycleHeader" :fit="fit">
        </template>
      </el-table-column>
      <el-table-column prop="recycleAccountDTO.recycleAccount" label="账号" width="150">
      </el-table-column>
      <el-table-column label="账号状态" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.recycleAccountDTO.state==0?'正常':scope.row.recycleAccountDTO.state==1?'禁用':'删除'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="siteName" label="站点名称" width="150">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="setState(scope.row,0)" style="margin: 2px;">启用</el-button>
          <el-button type="primary" size="small" @click="setState(scope.row,1)" style="margin: 2px;">禁用</el-button>
          <el-button type="danger" size="small" @click="setState(scope.row,2)" style="margin: 2px;">删除</el-button>
          <el-button type="primary" size="small" @click="selectAccount(scope.row)" style="margin: 2px;">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer title="站点账号信息" :visible.sync="drawer" :direction="direction" :with-header="false">
      <div style="margin: 30px; width: 400px;">
      <el-form :label-position="labelPosition" disabled label-width="70px" :model="recycleAccount">
         <el-form-item label="站点账号">
           <el-input v-model="recycleAccount.recycleAccount"></el-input>
         </el-form-item>
         <el-form-item label="账号状态">
           <el-input v-model="recycleAccount.state==0?'正常':recycleAccount.state==1?'禁用':'删除'"></el-input>
         </el-form-item>
         <el-form-item label="创建时间">
           <el-input v-model="recycleAccount.addTime"></el-input>
         </el-form-item>
         <el-form-item label="更新时间">
           <el-input v-model="recycleAccount.updateTime"></el-input>
         </el-form-item>
         <el-form-item label="操作人">
           <el-input v-model="recycleAccount.operator"></el-input>
         </el-form-item>
       </el-form>
       </div>
    </el-drawer>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="pageInfo.current" :page-sizes="[1, 2, 3, 4]" :page-size="pageInfo.size"
      layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: 'SelectRecycleInfo',
    data() {
      return {
        stateList:[
          {state:'0',orderState:'启用'},
          {state:'1',orderState:'禁用'},
          {state:'2',orderState:'删除'},
        ],
        recycleAccount:{},
        labelPosition: 'left',//表单对齐方式
        direction: 'rtl',//抽屉方向
        drawer: false,//抽屉开关
        fit: 'fill',
        pageInfo: {},
        state: '',
        recycleName: ''
      }
    },
    methods: {
      //查看详情
      selectAccount(row) {
        this.drawer = true
        this.recycleAccount = row.recycleAccountDTO
      },

      //设置账号状态
      setState(row, state) {
        this.$http.post("/site/recycleAccount/platSetUpdate.admin", {
          recycleAccountId: row.recycleAccountDTO.recycleAccountId,
          state: state
        }).then(resp => {
          if (resp.data.code = 200) {
            this.showRecycleInfo()
            alert(resp.data.message)
          } else {
            alert(resp.data.message)
          }
        })
      },

      // 分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.showRecycleInfo(this.pageInfo.current, val)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.showRecycleInfo(val, this.pageInfo.size)
      },

      //搜索框
      seachSiteName(){
        this.common(null,null,this.state,this.recycleName)
      },

      //下拉框
      selectState(state){
        this.common(null,null,state,this.recycleName)
      },

      //查询回收员信息
      showRecycleInfo(current, size) {
        this.common(size, current, this.state, this.recycleName)
      },

      //查询回收员信息（公共）
      common(size, current, state, recycleName) {
        this.$http.post("/site/recycleInfo/platPageSelect.admin", {
          size:size,
          current:current,
          state:state,
          recycleName:recycleName
        }).then(resp => {
          console.log(resp.data.data)
          if (resp.data.code == 200) {
            this.pageInfo = resp.data.data
          } else {
            this.pageInfo = {}
          }
        })
      }
    },
    created() {
      this.showRecycleInfo()
    }
  }
</script>

<style>
</style>
